import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import store from '@/store';
import LoginView from '../views/LoginView.vue'
import RegisterView from '../views/RegisterView.vue'
import HomeView from '../views/HomeView.vue'
import AdminView from '../views/AdminView.vue'
import AddCategoryComponent from '../components/admin/shop/AddCategoryComponent.vue'
import CategoryListComponent from '../components/admin/shop/CategoryListComponent.vue'
import AddAttributeKeyComponent from '../components/admin/shop/AddAttributeKeyComponent.vue'
import AddSkuTableComponent from '../components/admin/shop/AddSkuTableComponent.vue'
import GoodsInfoView from '../views/GoodsInfoView.vue'
import UserHomeView from '../views/UserHomeView.vue'
import ManageAddressComponent from '../components/user/address/ManageAddressComponent.vue'
import OrdersPayView from '../views/OrdersPayView.vue'
import ShoppingCartListComponent from '../components/user/shoppingcart/ShoppingCartListComponent.vue'
import OrdersListComponent from '../components/user/orders/OrdersListComponent.vue'
import SpuListComponent from '../components/admin/shop/SpuListComponent.vue'
import ManegeOrdersListComponent from '../components/admin/orders/OrdersListComponent.vue'
import UserInfoComponent from '../components/user/userinfo/UserInfoComponent.vue'
import UserListComponent from '../components/admin/user/UserListComponent.vue'
import AddCommentComponent from '../components/user/comment/AddCommentComponent.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: { requiresAuth: true, roles: ['1', '2'] }
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/admin',
    name: 'admin',
    component: AdminView,
    meta: { requiresAuth: true, roles: ['1'] },
    children: [
      {
        path: '/addcategory',
        name: 'addcategory',
        component: AddCategoryComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
      {
        path: '/categorylist',
        name: 'categorylist',
        component: CategoryListComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
      {
        path: '/addattributekey',
        name: 'addattributekey',
        component: AddAttributeKeyComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
      {
        path: '/addskutable',
        name: 'addskutable',
        component: AddSkuTableComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
      {
        path: '/tospulist',
        name: 'tospulist',
        component: SpuListComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
      {
        path: '/toorderslist',
        name: 'toorderslist',
        component: ManegeOrdersListComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
      {
        path: '/userlist',
        name: 'userlist',
        component: UserListComponent,
        meta: { requiresAuth: true, roles: ['1'] },
      },
    ]
  },
  {
    path: '/goodsinfo/:id',
    name: 'goodsinfo',
    component: GoodsInfoView,
    props: true,
    meta: { requiresAuth: true, roles: ['1', '2'] }
  },
  {
    path: '/userhome',
    name: 'userhome',
    component: UserHomeView,
    meta: { requiresAuth: true, roles: ['1', '2'] },
    children: [
      {
        path: '/manageaddress',
        name: 'manageaddress',
        component: ManageAddressComponent,
        meta: { requiresAuth: true, roles: ['1', '2'] }
      },
      {
        path: '/shoppingcartlist',
        name: 'shoppingcartlist',
        component: ShoppingCartListComponent,
        meta: { requiresAuth: true, roles: ['1', '2'] }
      },
      {
        path: '/orderslist',
        name: 'orderslist',
        component: OrdersListComponent,
        meta: { requiresAuth: true, roles: ['1', '2'] }
      },
      {
        path: '/userinfo',
        name: 'userinfo',
        component: UserInfoComponent,
        meta: { requiresAuth: true, roles: ['1', '2'] }
      },
      {
        path: '/addcomment/:id',
        name: 'addcomment',
        component: AddCommentComponent,
        props: true,
        meta: { requiresAuth: true, roles: ['1', '2'] }
      }
    ]
  },
  {
    path: '/orderspay/:id',
    name: 'orderspay',
    component: OrdersPayView,
    props: true,
    meta: { requiresAuth: true, roles: ['1', '2'] }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = store.getters.getIsLoggedIn;
  const userType = store.getters.getUserInfo.userType;

  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login'); // 未登录用户跳转到登录页
  } else if (to.meta.requiresAuth && !((to.meta as any).roles || []).includes(userType)) {
    next('/403'); // 用户角色不符合要求，跳转到403页面或其他页面
  } else {
    next(); // 允许访问该路由
  }
});

export default router
